
import { useState } from 'react'
import { TextArea, Form, Input, Button, toast, Field, Modal } from '../dComponent'

function Pform(props) {
    let [smShow, setsmShow] = useState(false)
    let [formData, setFormData] = useState({})
    return (
        <Form>
            <div>
                <Field 
                    label="文本信息：" 
                    name='textArea'
                    labelWidth={100}
                >
                <div>
                    <TextArea
                        onChange={(val) => {
                            console.log(val)
                        }}
                        count
                        maxLength={100}
                    />
                </div>
                </Field>
            </div>
            <Field
                mark
                name='telNum'
                label="手机号码："
                labelWidth={100}
                checkRules={{
                    regExp: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                    warnText: '请输入正确的手机号码'
                }}>
                <Input
                    placeholder='请输入手机号码'
                    type='tel'
                    maxLength={11}
                    onChange={val => {
                        // console.log(val)
                    }}
                />
            </Field>
            <Field
                mark
                name='userName'
                label="用户名："
                labelWidth={100}
                checkRules={{
                    warnText: '请输入正确的用户名',
                    checkFun:function(val){
                        // 简单写个长度校验的规则
                        if(val.length > 8){
                            // toast.error('用户名最长不超过8位')
                            return false
                        }else if(val.length === 0){
                            // toast.error('用户名必填')
                            return false
                        }
                        return true
                    }
                }}>
                <Input
                    placeholder='请输入用户名'
                    type='text'
                    maxLength={11}
                    onChange={val => {
                        // console.log(val)
                    }}
                />
            </Field>
            <Button
                onClick={()=>{
                    let pass = Form.check()
                    let data = Form.getData()
                    let array = Form.toArray()
                    toast.info(pass?'通过':'没通过')
                    console.log(data)
                    setFormData({
                        obj:data,
                        array
                    })
                    if(pass){
                        setsmShow(true)
                    }
                }}
                style={{width:'100px',marginLeft:'120px', marginTop:'30px'}}
            >提交</Button>
            <Modal
                title='表单信息'
                size='lg'
                visible={smShow}
                close={()=>{
                    setsmShow(false)
                }}
            >
                对象格式:
                <br/>
                {JSON.stringify(formData.obj)}
                <br/>
                数组格式:
                <br/>
                {JSON.stringify(formData.array)}
            </Modal>
        </Form>
    )
}
export default Pform